<template>
  <div class="add">
    <div v-if="type == 'ADD'">
      <el-main>
        <el-tabs>
          <el-tab-pane :label="labels">
            <el-form :rules="rules" ref="unitForm" :model="unitForm" label-width="120px">
              <el-form-item prop="communityname" label="计费项目名称">
                <el-input v-model="unitForm.payname"></el-input>
              </el-form-item>
              <el-form-item prop="unitname" label="项目优先级">
                <el-input v-model="unitForm.paylevel"></el-input>
              </el-form-item>
              <el-form-item prop="unitnum" label="项目用量/时长">
                <el-input v-model="unitForm.paynum"></el-input>
              </el-form-item>
              <el-form-item prop="unitnum" label="项目价格">
                <el-input v-model="unitForm.paymoney"></el-input>

              </el-form-item>
              <el-form-item prop="unitstatus" label="通知状态">
                <el-select v-model="unitForm.paystatus" placeholder="选择状态" style="width: 200px;">
                  <el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item prop="unitstatus" label="计费目录">
                <el-select v-model="unitForm.c_id" placeholder="选择状态" style="width: 200px;">
                  <el-option v-for="item in idOptions" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="通知内容">
                <template>
                  <quill-editor v-model="unitcontext" ref="myQuillEditor" :options="editorOption"
                    @blur="onEditorBlur($event)" @focus="onEditorFocus($event)" @change="onEditorChange($event)">
                  </quill-editor>
                </template>
              </el-form-item>
            </el-form>
            <div class="btn">
              <el-button type="primary" @click="$router.push('/home/pay/payType')">返回</el-button>
              <el-button type="primary" @click="addUnit()">保存</el-button>
              <el-button type="primary" @click="addUnit()">提交</el-button>
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-main>
    </div>
    <div v-else-if="type == 'DETAIL'">
      <el-main>
        <el-tabs>
          <el-tab-pane class="detail" label="计费项目查看">
            <el-form ref="unitDetail" label-width="120px">
              <el-form-item label="计费项目名称">
                {{ unitDetail.payname }}
              </el-form-item>
              <el-form-item label="项目优先级">
                {{ unitDetail.paylevel }}
              </el-form-item>
              <el-form-item label="项目用量/时长">
                {{ unitDetail.paynum }}
              </el-form-item>
              <el-form-item label="项目价格">
                {{ unitDetail.paymoney }}
              </el-form-item>
              <el-form-item label="通知状态">
                {{ getStatusLabel(unitDetail.paystatus) }}
              </el-form-item>
              <el-form-item label="通知人">
                {{ unitDetail.username }}
              </el-form-item>
              <el-form-item label="咨询问候">
                <div v-html="unitDetail.paycontent"></div>
              </el-form-item>
            </el-form>
            <div class="btn">
              <el-button type="primary" @click="$router.push('/home/pay/payType')">返回</el-button>
              <!-- <el-button type="primary" @click="updateUnit">编辑</el-button> -->
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-main>
    </div>
  </div>
</template>

<script>

export default {

  data() {
    return {
      props: ['type'],
      labels: '新增计费项目',
      unitcontext: '',
      editorOption: {},
      qurreyInfo: {
        value: ''
      },
      unitDetail: {},
      unitForm: {
        c_id: '',
        communityname: '',
        unitname: '',
        unitnum: '',
        unitstatus: '',
        unitcontext: '',
        token: sessionStorage.token
      },
      statusOptions: [
        { value: '1', label: '未通知' },
        { value: '2', label: '已通知' },
      ],
      idOptions: [
        { value: '7', label: '电费目录' },
        { value: '8', label: '水费固定月目录' },
        { value: '9', label: '水费按量目录' },
        { value: '10', label: '天然气目录' },
        { value: '11', label: '物业费目录' },
        { value: '12', label: '宽带费目录' },
      ],
      rules: {
        communityname: [
          { required: true, message: '请填写小区名称', trigger: 'blur' }
        ],
        unitname: [
          { required: true, message: '请填写单元名称', trigger: 'blur' }
        ],
        unitnum: [
          { required: true, message: '请填写栋数', trigger: 'blur' }
        ],
        unitstatus: [
          { required: true, message: '请选择状态', trigger: 'change' }
        ]
      }
    }

  },
  computed: {
    getStatusLabel() {
      return (unitstatus) => {
        const status = this.statusOptions.find(option => option.value == unitstatus);
        return status ? status.label : '未通知';
      };
    }
  },
  methods: {
    async addUnit() {
      if (this.id != undefined) {
        this.unitForm.u_id = this.id
        const { data: res } = await this.axios.post('house/updateunitList', this.unitForm);
        console.log(res);
        this.$confirm('确认提交信息？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'success'
        }).then(() => {
          this.$message.success('修改成功')
          this.$router.push('/home/house/unit')
        }).catch(() => {
          this.$message.info('已取消修改')
        })
      } else {
        const { data: res } = await this.axios.post('/cost/addCostData', this.unitForm);
        console.log(res);
        this.$confirm('确认提交信息？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'success'
        }).then(() => {
          this.$message.success('添加成功')
          this.$router.push('/home/pay/payType')
        }).catch(() => {
          this.$message.info('已取消添加')
        })
      }

    },
    async getUnitDetail() {
      const { data: res } = await this.axios.get('/cost/getCostDetail', {
        params: { 
          id: this.id,
          token: sessionStorage.token
        }
      });
      console.log(res[0]);
      this.unitDetail = res[0]

    },
    async updateUnit() {
      this.type = 'ADD'
      console.log(this.type);
      this.unitForm = { ...this.unitDetail };
      this.unitForm.unitstatus = this.getStatusLabel(this.unitDetail.unitstatus)
      this.unitcontext = this.unitDetail.unitcontext;
      this.labels = '编辑单元'
      this.getUnitDetail()
    }
  },
  created() {
    console.log('type:', this.$route.query.type);
    console.log('id:', this.$route.query.detailId);
    this.type = this.$route.query.type;
    this.id = this.$route.query.detailId;
  },
  mounted() {
    if (this.type == 'DETAIL') {
      this.getUnitDetail()
    }
  }
}
</script>

<style scoped lang="scss">
/* 添加样式 */
.add {
  height: 100%;
  margin: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

  .el-tabs {
    .el-tab-pane {
      margin: 30px;
      display: flex;
      flex-direction: row;
      // justify-content: space-between;

      .el-form {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        margin: 10px 30px;

        .el-form-item {
          margin: 10px 30px;
          flex: 1;
          min-width: calc((100% - 200px) / 2)
        }
      }

      .btn {
        margin-top: 70px;
        height: 80px;
        display: flex;
        flex-direction: column;

        .el-button {
          margin: 10px 0;
          width: 85px;
          flex: 1;
        }
      }
    }

    .detail {
      margin: 30px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;

      .el-form {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        margin: 10px 30px;

        .el-form-item {
          margin: 10px 30px;
          flex: 1;
          min-width: calc((100% - 200px) / 2)
        }
      }

      .btn {
        margin-top: 70px;
        height: 80px;
        display: flex;
        flex-direction: column;

        .el-button {
          margin: 10px 0;
          width: 85px;
          flex: 1;
        }
      }
    }
  }


}
</style>